<template>
  <Card>
    <p slot="title">
      <Icon type="ios-navigate"></Icon>
      首页
    </p>
    <div class="main">
      <Row>
        <Col :span="3">
          <img class="myHead" :src="adminData.mainimg"/>
        </Col>

        <Col :offset="1">
          <span style="color:#E48B53;font-size:22px;font-weight:700;display: block">{{adminData.name}} 欢迎您</span>
          <span style="font-size: 12px;color: #00a0e9">您上次登录的时间是: {{adminData.lasttime}}</span>
          <span style="font-size: 12px;color: #00a0e9;margin-left: 20px" id="show">登录IP: {{ip}}  {{city}}</span>
        </Col>
      </Row>

      <!--消息提醒的-->
      <Row class="message" :gutter="20">
        <Col :span="8">
          <Card class="card-item">
            <Icon type="ios-book"></Icon>
            文章总数 {{mainData.articleCount}}
          </Card>
        </Col>

        <Col :span="8">
          <Card class="card-item">
            <Icon type="waterdrop"></Icon>
            主题总数 {{mainData.subjectCount}}
          </Card>
        </Col>

        <Col :span="8">

          <Card class="card-item">
            <Icon type="chatbubble-working"></Icon>
            未读消息 {{mainData.notHandleCount}}
          </Card>
        </Col>
      </Row>


      <Card style="margin-top: 30px;">
        <p slot="title" style="color: #a94442;font-size: 13px;">
          最近未处理的评论信息
        </p>
        <div>
          <Button
            type="success"
            style="margin-left: 20px;margin-bottom: 10px"
            @click="handlerMessageAll">
            <Icon type="checkmark"></Icon>
            全部已读
          </Button>
        </div>
        <Table :loading="loading" stripe :columns="columns"
               :data="data"></Table>
      </Card>

    </div>
  </Card>
</template>
<script>

  var ip = returnCitySN["cip"];
  var city = returnCitySN["cname"];

  export default {
    name: "home",
    data() {
      return {
        adminData: {
          name: '',
          lasttime: '',
          mainimg: ''
        },
        mainData: {
          articleCount: 0,
          subjectCount: 0,
          notHandleCount: 0,
          notHandle: []
        },
        ip: '',
        city: '',
        columns: [
          {
            title: '序号',
            type: 'index'
          },
          {
            title: '昵称',
            key: 'name',
            ellipsis: true
          },
          {
            title: '邮箱',
            key: 'email',
            ellipsis: true
          },
          {
            title: '内容',
            key: 'content',
            ellipsis: true
          },
          {
            title: '时间',
            key: 'time',
            sortable: true
          },
          {
            title: '操作',
            key: 'action',
            render: (h, params) => {
              return h('Dropdown', {
                on: {
                  'on-click': this.actionClick
                },
                props: {
                  trigger: 'click'
                }
              }, [
                h('Button', {
                  props: {
                    type: "primary"
                  }
                }, [
                  '操作',
                  h('Icon', {
                    props: {
                      type: "arrow-down-b"
                    },
                    style: {
                      marginLeft: '5px'
                    }
                  })
                ]),
                h('DropdownMenu', {
                  slot: "list"
                }, [
                  h('DropdownItem', {props: {name: 0 + "-" + params.index}}, "已读"),
                  h('DropdownItem', {props: {name: 1 + "-" + params.index}}, "查看")
                ])
              ])
            }
          }
        ],
        data: [],
        loading: false,
        serverUrl: ''  //跳转的真实服务器地址
      }
    },
    mounted() {
      this.$emit('selectMenu', '1-1');
      this.ip = ip;
      this.city = city;
    },
    async created() {
      let {data} = await this.axios.get('static/data.json');
      this.serverUrl = data.serverUrl;
      let self = this;
      this.http.post("/get-admin", null, success => {
        self.adminData = success;
      }, null);
      this.requestMainData();
    },
    methods: {
      actionClick(name) {
        let action = parseInt(name.split('-')[0]);
        let index = parseInt(name.split('-')[1]);

        let id = this.mainData.notHandle[index].id;
        switch (action) {
          case 0:
            this.http.postJson("/updateCommentDown", [id], success => {
              this.$Message.success("操作成功");
              this.requestMainData();
            }, error => {
              this.$Message.error(error);
            });
            break;
          case 1:
            let articleId = this.mainData.notHandle[index].articleid;
            window.open(this.serverUrl + articleId);
            break;
        }
      },
      /**
       * 全部设置为已读
       */
      handlerMessageAll() {
        if (this.mainData == null || this.mainData.notHandle == null || this.mainData.notHandle.length == 0) {
          return;
        }
        let ids = [];
        this.mainData.notHandle.forEach(item => {
          ids.push(item.id)
        });
        this.http.postJson("/updateCommentDown", ids, success => {
          this.$Message.success("操作成功");
          this.requestMainData();
        }, error => {
          this.$Message.error(error);
        })

      },
      requestMainData() {
        this.data.length = 0;
        this.loading = true;
        let self = this;
        this.http.get("/getStatisticsData", null, success => {
          self.mainData = success;

          success.notHandle.forEach(item => {
            self.data.push({
              id: item.id,
              name: item.username,
              email: item.email,
              content: item.content,
              time: item.createtime
            });
          });

          self.loading = false;
        }, error => {
          self.$Message.error(error);
          self.loading = false;
        });
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .main
    padding: 10px
    .myHead
      max-height: 50px
      border-radius: 50%
    .message
      margin-top: 50px
      .card-item
        text-align: center
        font-size: 17px
        color: #2d60a6

</style>
